import React, { useEffect, useState } from "react";
import { PropsInterface } from "@/components/ShowBooks/comp/types";
import { BookInfo } from "@/types";
import { ConfigProvider, Table } from "antd";
import { RenderEmpty } from "@/components/comp/RenderEmpty";
import { fixLongText } from "@/utils";
import { Link } from "react-router-dom";
import { ColumnFilterItem } from "antd/es/table/interface";

const { Column } = Table;

const TotalBooksPage: React.FC<PropsInterface> = (props: PropsInterface) => {
  const [booksInfo, setBooksInfo] = useState<BookInfo[]>([]);
  const [filterList, setFilterList] = useState<ColumnFilterItem[]>([]);

  useEffect(() => {
    // console.log(props.bookInfoList);
    setBooksInfo(props.bookInfoList);
    let filterSet = new Set<string>();

    props.bookInfoList.forEach((bookInfo) => {
      filterSet.add(bookInfo.name);
    });
    let filterTempList: ColumnFilterItem[] = [];
    filterSet.forEach((name) => {
      filterTempList.push({ text: name, value: name });
    });
    setFilterList(filterTempList);
  }, [props.bookInfoList]);

  return (
    <>
      <ConfigProvider renderEmpty={RenderEmpty}>
        <Table dataSource={booksInfo} bordered>
          <Column
            title="课程名称"
            dataIndex="name"
            key="name"
            render={(text) => {
              return fixLongText(text, 6);
            }}
            sorter={(a: BookInfo, b: BookInfo) => {
              return a.name.localeCompare(b.name);
            }}
            filters={filterList}
            filteredValue={null}
            onFilter={(value: string | boolean | number, record: BookInfo) =>
              record.name.includes(JSON.stringify(value))
            }
          ></Column>
          <Column
            title="课程开设学院"
            dataIndex="institute"
            key="institute"
            sorter={(a: BookInfo, b: BookInfo) => {
              return a.institute.localeCompare(b.institute);
            }}
          ></Column>
          <Column
            title="适用专业"
            dataIndex="major"
            key="major"
            render={(text) => {
              return fixLongText(text);
            }}
            sorter={(a: BookInfo, b: BookInfo) => {
              return a.major.localeCompare(b.major);
            }}
          ></Column>
          <Column
            title="课程性质"
            dataIndex="characteristics"
            key="characteristics"
            sorter={(a: BookInfo, b: BookInfo) => {
              return a.characteristics.localeCompare(b.characteristics);
            }}
          ></Column>
          <Column
            title="先修课程"
            dataIndex="prerequisite"
            key="prerequisite"
            render={(text) => {
              return fixLongText(text, 6);
            }}
          ></Column>
          <Column
            title="参考书目"
            dataIndex="reference"
            key="reference"
            render={(text) => {
              return fixLongText(text, 15);
            }}
          ></Column>
          <Column
            title="操作"
            dataIndex="id"
            key="id"
            render={(text) => {
              return (
                <>
                  <Link target="_blank" to={`/book/${text}`}>
                    详情
                  </Link>
                </>
              );
            }}
          ></Column>
        </Table>
      </ConfigProvider>
    </>
  );
};
export default TotalBooksPage;
